<!--
 * @Description: 组件大小设置
 * @Author: DHL
 * @Date: 2022-01-12 13:28:18
 * @LastEditors: DHL
 * @LastEditTime: 2022-04-04 08:46:02
-->
<template>
  <div class="tw-size-select-wrapper" @click="handleSizeSelectClick">
    <el-dropdown ref="dropdownRef" trigger="click" @command="handleSetSize" size="large">
      <div class="size-select">
        <svg-icon icon-class="size"></svg-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="item of sizeOptions"
            :key="`tws_${item.value}`"
            :disabled="size === item.value"
            :command="item.value"
          >
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
  import { computed, reactive, ref, watch } from 'vue'
  import { useAppStore } from '/@/store/modules/app'
  import { ElMessage } from 'element-plus'

  const appStore = useAppStore()

  const sizeOptions = reactive([
    { label: 'Default', value: 'default' },
    { label: 'Large', value: 'large' },
    { label: 'Small', value: 'small' }
  ])

  const size = computed(() => {
    return appStore.getSize
  })

  const dropdownRef = ref()
  const openMenu = ref(false)

  watch(openMenu, (newVal) => {
    if (newVal) {
      dropdownRef.value.handleOpen()
    } else {
      dropdownRef.value.handleClose()
    }
  })

  function handleSetSize(size: string) {
    appStore.setSize(size)

    refreshView()

    ElMessage.success('Switch Size Success')
  }

  function refreshView() {
    location.reload()
  }

  function handleSizeSelectClick() {
    openMenu.value = !openMenu.value
  }
</script>

<style scoped lang="scss">
  .tw-size-select-wrapper {
    .el-dropdown {
      vertical-align: middle;
    }
    .size-select {
      padding: 0px 10px;
    }
  }
</style>
